<template>
	<view class="container">
		<view class="detail_xq">
			<view class="header">
				<view class="zhuangtai">{{datas.status_name}}</view>
				<!-- <view class="uni-text-gray" v-if="datas.status==1"><text>39:10</text>后订单将自动取消</view> -->
			</view>
			<view class="address">
				<view class="flex flex-align flex-bt">
					<view class="left">
						<view class="one">{{addressInfo.address_name}}  {{addressInfo.address_phone}}</view>
						<view class="text_two">{{addressInfo.address_province}}{{addressInfo.address_city}}{{addressInfo.address_area}}{{addressInfo.address_content}}</view>
					</view>
					<view class="right">
						<tui-icon name="arrowright" color="808080" :size="24"></tui-icon>
					</view>
				</view>
				<image src="/static/line.jpg" mode=""></image>
			</view>
			<view class="shop_cart">
				<!-- <view class="title flex flex-align">
					<tui-icon name="shop" :size="18" color="#212121"></tui-icon>
					<view class="title">Sporty& Rich 官方旗舰店</view>
				</view> -->
				<view class="list flex" v-for="(item,index) in datas.order" :key="index">
					<image :src="item.goods_cover" mode="aspectFit" class="left"></image>
					<view class="right">
						<view class="one uni-ellipsis">{{item.goods_name}}</view>
						<view class="chima uni-text-gray">{{item.goods_spec}}</view>
						<view class="price flex flex-align flex-bt">
							<view class="jiage">￥{{item.price_selling}}</view>
							<view class="uni-text-gray uni-font24">x {{item.stock_sales}}</view>
						</view>
					</view>
				</view>
				
				<view class="tuikuan flex flex-align flex-end" v-if="datas.status==1">
					<view class="btn" @click="go_tui">申请退款</view>
				</view>
				<view class="xinxi_list flex flex-align flex-bt uni-text-gray ">
					<view class="left uni-font24">商品总价</view>
					<view class="right uni-font24">
						￥{{datas.amount_total-datas.amount_express}}
					</view>
				</view>
				<view class="xinxi_list flex flex-align flex-bt uni-text-gray ">
					<view class="left uni-font24">运费</view>
					<view class="right uni-font24">￥{{datas.amount_express}}</view>
				</view>
				<view class="xinxi_list flex flex-align flex-bt uni-text-gray " v-if="datas.balance2_scale!=0">
					<view class="left uni-font24">积分抵扣</view>
					<view class="right uni-font24">-￥{{datas.balance2_scale}}</view>
				</view>
				<view class="xinxi_list flex flex-align flex-bt uni-text-gray " v-if="datas.coupon_price!=0">
					<view class="left uni-font24">优惠券金额</view>
					<view class="right uni-font24">-￥{{datas.coupon_price}}</view>
				</view>
				<view class="xinxi_list flex flex-align flex-bt bold border_b">
					<view class="left ">实付金额</view>
					<view class="right ">￥{{datas.amount_real}}</view>
				</view>
				<view class="kefu_fenx flex flex-align ">
					<view class="flex-1 flex flex-align flex-center" style="position: relative;">
						<tui-icon name="kefu" :size="18" color="#212121"></tui-icon>
						<view class="">联系客服</view>
						<button open-type="contact" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0">
							
						</button>
					</view>
					<view class="flex-1 flex flex-align flex-center">
						<tui-icon name="share" :size="18" color="#212121"></tui-icon>
						<view class="">分享订单</view>
						<button open-type="share" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0">
							
						</button>
					</view>
				</view>
			</view>
			<view class="jiaoyi_xx">
				<view class="title">交易信息</view>
				<view class="list">订单编号：{{datas.order_no}} <text class="red" @click="copyOrderId(datas.order_no)">复制</text></view>
				<view class="list" v-if='datas.status==4||datas.status==5'>快递公司：{{addressInfo.company_name}} <text class="red" @click="copyOrderId(addressInfo.company_name)">复制</text></view>
				<view class="list" v-if='datas.status==4||datas.status==5'>快递单号：{{addressInfo.company_code}} <text class="red" @click="copyOrderId(addressInfo.company_code)">复制</text></view>
				<view class="list">下单时间：{{datas.create_at}}</view>
				<view class="list">付款时间：{{datas.payment_datetime}}</view>
				<view class="list red">支付方式：{{datas.payment_remark}}</view>
			</view>
			<!-- <view class="tuikuan flex flex-align flex-end" v-if="datas.status==3">
				<view class="btn">修改地址</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				datas:'',
				addressInfo:'',
				manghe_dingdan:'',
				is_combin:'',
				data_user:''
			}
		},
		onLoad(e) {
			this.get_data(e.id)
			this.id = e.id
			this.getData()
			if(e.is_combin==4){
				this.is_combin =e.is_combin
				this.get_manghe(this.id)
			}
		},
		// #ifdef MP
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '邀请好友',
			  // imageUrl:'/static/yingyang/banner.png',
		      path: '/pages/index/index?inviter_code='+this.data_user.inviter_code
		    }
		},
		// #endif
		methods: {
			go_url(e){
				console.log(e)
				let that = this
				that.tui.href(e)
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.data_user = res.data.info
					}
				}).catch((res) => {
					that.is_btn = false
				})
			},
			get_data(e){
				let that = this
				that.tui.request("api.auth.order/orderDetail", "get", {order_no:e}, false, true, false).then((res) => {
					if(res.code==1){
						that.datas = res.data.info
						that.addressInfo=res.data.info.address
					}
					
				}).catch((res) => {})
			},
			copyOrderId: function(data) {
				let that = this;
				uni.setClipboardData({
					data: data
				});
			},
			go_tui(){
				let that = this
				that.tui.request("v1/shop/orders/spellRefund", "post", {order_id:that.id}, false, false, true).then((res) => {
					that.tui.toast('退款成功')
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
	.detail_xq{padding: 30rpx;
		.header{
			.zhuangtai{font-weight: bold;font-size: 34rpx;margin-bottom: 10rpx;}
			.uni-text-gray{
				text{color: #b40000;font-weight: bold;margin-right: 10rpx;}
			}
		}
		.address{background: #fff;padding: 30rpx 20rpx 30rpx 40rpx;border-radius: 10rpx;margin: 60rpx 0;position: relative;
			image{width: 100%;height:6rpx ;position: absolute;bottom: 0;left: 0;}
			.left{
				.text_two{width: 500rpx;}
			}
		}
		.shop_cart{background: #fff;padding: 30rpx 30rpx 16rpx;
			.list{margin-bottom: 20rpx;
				.left{width: 180rpx;height: 180rpx;margin-right: 20rpx;}
				.right{width: 100%;
					.one{width: 460rpx;font-weight: bold;font-size: 30rpx;}
					.chima{margin: 6rpx 0 ;}
					.price{margin-top: 20rpx;
						.jiage{font-weight: bold}
					}
				}
			}
		}
		.tuikuan{margin-bottom: 30rpx;margin-top: 20rpx;
			.btn{background: #fff;border: 1px solid #333;color: #333;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;}
		}
		.xinxi_list{margin-top:10rpx;}
		.kefu_fenx{padding-top:30rpx;padding-bottom: 20rpx;
			.flex-item{
				border-right: 1px solid #eee;
			}
			view{margin-left: 10rpx;}
			.flex-item:last-child{border-right: none;}
		}
	}
	.bold{font-weight: bold;}
	.border_b{border-bottom: 1px solid #eee;padding-bottom: 20rpx;}
	.jiaoyi_xx{background: #fff;margin-top: 30rpx;padding: 30rpx;border-radius: 10rpx;
		.title{font-weight: bold;font-size: 34rpx;margin-bottom: 30rpx;}
		.list{padding: 10rpx 0;
			text{margin-left: 30rpx;}
		}
	}
	.red{color: #b40000;}
</style>